<template>
	<view class="container">
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">我的作业票</view>
			<view class="right"><image @click="toLog" src="../../../static/fengxianxuncha/log.png"></image></view>
		</view>
		<view id="body">
			<!--基础-->
			<view class="card">
				<view class="title">
					<view class="name">基础信息</view>
				</view>
				<view class="item flex-row">
					<view class="label">作业编号：</view>
					<view class="input">{{ form.job_num || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">开始日期：</view>
					<view class="input">{{ form.start_time.split(' ')[0] || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">开始时间：</view>
					<view class="input">{{ form.start_time.split(' ')[1] || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">结束日期：</view>
					<view class="input">{{ form.over_time.split(' ')[0] || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">结束时间：</view>
					<view class="input">{{ form.over_time.split(' ')[1] || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">审批时长：</view>
					<view class="input">预计{{ form.shenpi_hours }}小时</view>
				</view>
				<view class="item flex-row">
					<view class="label">级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</view>
					<view class="input">{{ form.level || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">作业地点：</view>
					<view class="input">{{ form.place || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">作业高度：</view>
					<view class="input">{{ others.type || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">危险辨识：</view>
					<view class="input">{{ form.dangers || '' }}</view>
				</view>
				<view class="item flex-row" style="align-items: flex-start;">
					<view class="label">作业内容：</view>
					<textarea v-model="form.content" disabled/>
				</view>
			</view>
			<!--负责人-->
			<view class="card">
				<!--作业人-->
				<view class="title">
					<view class="name">作业人信息</view>
				</view>
				<view class="people-card">
					<view v-for="(item, index) in workMembers" :key="index" class="people">
						<view class="flex-row">
							<view>姓名：{{ item.cert_man || '' }}</view>
							<view>工作：{{ item.job_class || '' }}</view>
						</view>
						<view>证件号：{{ item.num || '' }}</view>
					</view>
				</view>
				<!--审批人-->
				<view class="title">
					<view class="name">审批人信息（勾选为巡检人）</view>
				</view>
				<view class="people-card">
					<view v-for="(item, index) in checkMembers" :key="index" class="people flex-row">
						<view class="flex-row" style="width: 100%;justify-content: space-between;line-height: 1.4;">
							<text>审批人{{ index+1 }}：{{ item.name }}</text>
							<uni-icons v-if="item.checked == 'true'" type="checkbox" size="20" color="#007aff" class="select"></uni-icons>
							<uni-icons v-else type="checkbox" size="20" color="#eee" class="select"></uni-icons>
						</view>
					</view>
				</view>
				<!--监督人-->
				<view class="title">
					<view class="name">监督确认人</view>
				</view>
				<view class="people-card">
					<view class="people">{{ form.jiandu_man_name }}</view>
				</view>
			</view>
			<!--申请人-->
			<view class="card">
				<view class="title">
					<view class="name">申请人</view>
				</view>
				<view class="people-card">
					<view class="people">{{ form.apply_man_name }}</view>
				</view>
				<view class="title">
					<view class="name">申请人签字</view>
				</view>
				<view class="sign-image">
					<image :src="form.apply_sign"></image>
				</view>
			</view>
			<!--监督人-->
			<view class="card" v-if="form.status > 1">
				<view class="title">
					<view class="name">监督确认人签字、说明</view>
				</view>
				<view class="item">签字人</view>
				<view class="people-card">
					<view class="people">{{ form.jiandu_sign.name }}</view>
				</view>
				<view class="item">签字人描述</view>
				<view class="people-card">
					<view class="people">{{ form.jiandu_sign.remark }}</view>
				</view>
				<view class="item">签字</view>
				<view class="sign-image">
					<image :src="form.jiandu_sign.sign_url"></image>
				</view>
			</view>
			<!--审批人-->
			<view class="card" v-if="form.status > 2">
				<view class="title">
					<view class="name">审批人签字、说明</view>
				</view>
				<view class="item">签字人</view>
				<view class="people-card">
					<view class="people">{{ form.shenpi_sign.name }}</view>
				</view>
				<view class="item">签字人描述</view>
				<view class="people-card">
					<view class="people">{{ form.shenpi_sign.remark }}</view>
				</view>
				<view class="item">签字</view>
				<view class="sign-image">
					<image :src="form.shenpi_sign.sign_url"></image>
				</view>
			</view>
			<!--现场教育-->
			<view class="card" v-if="form.status > 4">
				<view class="title">
					<view class="name">现场教育</view>
				</view>
				<view class="item">现场视图</view>
				<view class="item upload">
					<upload @upload="uploadScenePic" @delete="delScenePic" :files="form.xianchang_sign.pics" :count="3" :icon="false" :showBtn="false"></upload>
				</view>
				<view class="item">培训人签字</view>
				<view v-if="form.xianchang_sign.trains.length">
					<view v-for="(item, index) in form.xianchang_sign.trains" :key="index" class="sign-image">
						<image :src="item"></image>
					</view>
				</view>
				<view class="item">受训人签字</view>
				<view v-if="form.xianchang_sign.reciveTrains.length">
					<view v-for="(item, index) in form.xianchang_sign.reciveTrains" :key="index" class="sign-image">
						<image :src="item"></image>
					</view>
				</view>
			</view>
			<!--申请人作业巡检-->
			<view class="card" v-if="form.status > 66">
				<view class="title">
					<view class="name">申请人作业巡检</view>
				</view>
				<view class="item">
					<view class="check-list flex-row">
						<text>1、申请人作业中巡检</text>
						<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<!--审批人作业巡检-->
			<view class="card" v-if="form.status > 66">
				<view class="title">
					<view class="name">审批人作业巡检</view>
				</view>
				<view class="item">
					<view class="check-list flex-row">
						<text>1、审批人作业中巡检</text>
						<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<!--结束人签字、说明-->
			<view class="card" v-if="form.status > 6">
				<view class="title">
					<view class="name">结束人签字、说明</view>
				</view>
				<view class="item">签字人</view>
				<view class="people-card">
					<view class="people">{{ form.end_sign.name }}</view>
				</view>
				<view class="item">签字人描述</view>
				<view class="people-card">
					<view class="people">{{ form.end_sign.remark }}</view>
				</view>
				<view class="item">签字</view>
				<view class="sign-image">
					<image :src="form.end_sign.sign_url"></image>
				</view>
			</view>
			<!--验收人签字、说明-->
			<view class="card" v-if="form.status > 9">
				<view class="title">
					<view class="name">验收人签字、说明</view>
				</view>
				<view class="item">签字人</view>
				<view class="people-card">
					<view class="people">{{ form.yanshou_sign.name }}</view>
				</view>
				<view class="item">签字人描述</view>
				<view class="people-card">
					<view class="people">{{ form.yanshou_sign.remark }}</view>
				</view>
				<view class="item">签字</view>
				<view class="sign-image">
					<image :src="form.yanshou_sign.sign_url"></image>
				</view>
			</view>
			<view class="btns">
				<view @click="goBack" class="btn">返回上级</view>
			</view>
		</view>
	</view>
</template>

<script>
import upload from '@/components/upload/index.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue'
import { date } from '@/common/function.js';
export default{
	components: { upload,uniIcons },
	data(){
		return {
			userid: uni.getStorageSync('userid'),
			username: '',
			form: {},
			others: {},	// 其他
			workMembers: [],	// 作业人员
			checkMembers: [],	// 审批人
		}
	},
	onLoad(){
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
		
		this.getUserDetail();
		this.form = uni.getStorageSync('jobTicketFireDetail') || {};
		if(this.form.others) this.others = JSON.parse(this.form.others);
		if(this.form.work_man_info) this.workMembers = JSON.parse(this.form.work_man_info);
		if(this.form.shenpi_users) this.checkMembers = JSON.parse(this.form.shenpi_users);
		if(this.form.jiandu_sign) this.form.jiandu_sign = JSON.parse(this.form.jiandu_sign);
		if(this.form.shenpi_sign) this.form.shenpi_sign = JSON.parse(this.form.shenpi_sign);
		if(this.form.xianchang_sign) this.form.xianchang_sign = JSON.parse(this.form.xianchang_sign);
		if(this.form.end_sign) this.form.end_sign = JSON.parse(this.form.end_sign);
		if(this.form.yanshou_sign) this.form.yanshou_sign = JSON.parse(this.form.yanshou_sign);
		if(this.form.apply_man_name) this.form.apply_man_name = JSON.parse(this.form.apply_man_name);
		
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toLog(){
			uni.navigateTo({
				url: '../log?type=high&id='+this.form.id
			});
		},
		//获取用户信息
		getUserDetail(){
			let _this = this;
			uni.request({
				url: this.$API.getUserDetail,
				method:"POST",
				data:{ userid: this.userid},
				header:this.$API.get_head(),
				success: (res) => {
					_this.username = res.data.data.NAME;
				}
			})
		},
	}
}
</script>

<style scoped>
#body{
	height: calc(100vh - var(--status-bar-height) - 88upx);
	overflow-y: auto;
}

.sign-image{
	width: 100%;
	height: 300upx;
	margin-bottom: 20upx;
	background: #F0F0F0;
}
.sign-image image{
	width: 100% !important;
	height: 100% !important;
}

.check-list{
	font-size: 30upx;
	padding: 6upx 16upx;
	border-radius: 12upx;
	border: 2upx solid #eee;
}

textarea{
	width: 100%;
	height: 120upx;
	font-size: 28upx;
	background: #F2F2F2;
	padding: 12upx 18upx;
	border-radius: 12upx;
}

.people-card .people{
	padding: 0 14upx;
	margin-bottom: 20upx;
	border-radius: 10upx;
	background-color: #eee;
	position: relative;
}
.people-card .people .flex-row{
	justify-content: flex-start;
}
.people-card .people .flex-row view{
	width: 40%;
}
.people-card .people view{
	font-size: 28upx;
}
.people-card .people .pos{
	position: absolute;
	right: 20upx;
	top: 16upx;
}

.oper{
	color: #fff;
	font-size: 26upx;
	background: #007aff;
	border-radius: 10upx;
	padding: 2upx 20upx;
	display: inline-block;
}
	
.card{
	margin: 20upx;
	border-radius: 12upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .item.upload::after{
	content: '';
	display: block;
	clear: both;
}
.card .title view.name{
	height: 60upx;
	font-size: 32upx;
	text-indent: 24upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	margin-bottom: 20upx;
}
.card .item .label{
	width: 180upx;
	font-size: 30upx;
}
.card .item textarea{
	width: calc(100% - 180upx);
	box-sizing: border-box;
}
.card .item .input{
	width: calc(100% - 180upx);
	height: 68upx;
	line-height: 68upx;
	padding: 0 20upx;
	background: #F2F2F2;
	border-radius: 12upx;
	box-sizing: border-box;
}
.card .item  input,
.card .item .value{
	height: 68upx;
	line-height: 68upx;
	font-size: 30upx;
}
.card .item.btns .input{
	padding: 0;
	background: none;
}
.btns{
	padding: 30upx 40upx 40upx;
}
.btns .btn{
	color: #fff;
	width: 200upx;
	height: 52upx;
	margin: 0 auto;
	font-size: 30upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	background-color: #5F96F2;
}
</style>
